<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <button id="btn01">点我一下</button>

        <ul id="list1">
            <li id="l1">孙悟空</li>
            <li id="l2">猪八戒</li>
            <li id="l3">沙和尚</li>
        </ul>

        <ul id="list2">
            <li>蜘蛛精</li>
        </ul>

        <script>
            /* 点击按钮后，将id为l1的元素添加list2中 */
            const list2 = document.getElementById("list2")
            const l1 = document.getElementById("l1")
            const btn01 = document.getElementById("btn01")
            btn01.onclick = function () {
                const newL1 = l1.cloneNode(true) // 用来对节点进行复制的

                /* 
                    使用 cloneNode() 方法对节点进行复制时，它会复制节点的所有特点包括各种属性
                        这个方法默认只会复制当前节点，而不会复制节点的子节点
                        可以传递一个true作为参数，这样该方法也会将元素的子节点一起复制
                
                */
                newL1.id = "newL1"

                list2.appendChild(newL1)
            }
        </script>
    </body>
</html>
